<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<style>
	    body {
            background: url('../../static/img/login-bg.jpg') no-repeat center center fixed;
            background-size: cover;
        }
	</style>
</head>
<body>

<div id="app">
	
	<!--formBox-->
	<div class="formBox">
	    
	    <!--header-->
	    <div class="header-box">
	        <img src="../../static/img/index_logo.png" />
	    </div>
	    <div class="line"></div>
	    
	    <!--form-->
	    <div class="form-box">
	        <form onsubmit="return false" id="findCheck">
    	        <label>账号</label>
    	        <input type="text" class="form-control" autocomplete="off" placeholder="输入管理员账号" name="user_name" id="user_name" />
    	        <label>邮箱</label>
    	        <input type="email" class="form-control" placeholder="输入管理员邮箱" name="user_email" id="user_email" />
    	        
    	        <!--密保问题，账号和邮箱核对正确才会显示出来-->
    	        <span id="getMibaoSuccess" style="display:none;">
    	            <label></label>
    	            <input type="text" class="form-control" placeholder="输入密保问题答案" name="user_mb_answer" />
    	        </span>
    	        
    	        <!--密保验证通过-->
    	        <span id="findCheckPass" style="display:none;">
    	            <label>新密码</label>
    	            <input type="text" class="form-control" placeholder="输入新密码" name="user_pass" />
    	        </span>
    	        
    	        <!--提交按钮-->
    	        <span id="actionCheck" style="display:none;">
    	            <button class="form-control-login" onclick="findCheck();">验证账号</button>
    	        </span>
    	        <a href="./" class="findPass" id="findPass">登录账号</a>
    	        
	        </form>
	    </div>
	    
	</div>
	<!--result-->
	<p class="loginresult"></p>

</div><!-- app -->


<script type="text/javascript">

    // 初始化
    $('#findPass').text('输入正确的账号和邮箱会显示下一步')
    
    // 监听账号的输入
    $('#user_name').on('input propertychange', function(){
        
        var user_name = $('#user_name').val();
        var user_email = $('#user_email').val();
        getfindCheckmibao(user_name, user_email);
    
    })
    
    // 监听邮箱的输入
    $('#user_email').on('input propertychange', function(){
        
        var user_name = $('#user_name').val();
        var user_email = $('#user_email').val();
        getfindCheckmibao(user_name, user_email);
     
    })
    
    // 获取密保问题
    function getfindCheckmibao(user_name, user_email){
        
        $.ajax({
            type: "POST",
            url: "./getfindCheckmibao.php?user_name="+user_name+"&user_email="+user_email,
            success: function(res){
                
                // 成功
                if(res.code == 200){
                    
                    // 操作反馈（200状态码）
                    // 将密保问题显示出来
                    $('#getMibaoSuccess label').text(res.user_mb_ask);
                    $('#getMibaoSuccess').css('display','block');
                    // 将验证结果的按钮也显示出来
                    $('#findPass').text('登录账号')
                    $('#actionCheck').css('display','block');
                    
                }else{
                    
                    // 将密保问题和验证按钮隐藏
                    $('#getMibaoSuccess').css('display','none');
                    $('#actionCheck').css('display','none');
                }
            },
            error: function() {
                
                // 服务器发生错误
                showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看返回信息进行排查！')
            }
        });
    }
    
    // 验证账号、邮箱、密保是否符合
    function findCheck(){
        
        $.ajax({
            type: "POST",
            url: "./findCheck.php",
            data: $('#findCheck').serialize(),
            success: function(res){
                
                // 成功
                if(res.code == 200){
                    
                    // 操作反馈（200状态码）
                    // 将新密码输入框显示出来
                    $('#findCheckPass').css('display','block');
                    $('#actionCheck').html('<button class="form-control-login" onclick="setNewPass();">确认新密码</button>');
                }else{
                    
                    // 操作反馈（非200状态码）
                    // 将新密码输入框隐藏
                    $('#findCheckPass').css('display','none');
                    $('#actionCheck').html('<button class="form-control-login" onclick="findCheck();">验证账号</button>');
                    showErrorResult(res.msg)
                }
            },
            error: function() {
                
                // 服务器发生错误
                showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看返回信息进行排查！')
            }
        });
    }
    
    // 确认新密码
    function setNewPass(){
        
        $.ajax({
            type: "POST",
            url: "./setNewPass.php",
            data: $('#findCheck').serialize(),
            success: function(res){
                
                // 成功
                if(res.code == 200){
                    
                    // 操作反馈（200状态码）
                    showSuccessResult(res.msg)
                    
                }else{
                    
                    // 操作反馈（非200状态码）
                    showErrorResult(res.msg)
                    
                }
            },
            error: function() {
                
                // 服务器发生错误
                showErrorResult('服务器发生错误！可按F12打开开发者工具点击Network或网络查看返回信息进行排查！')
            }
        });
    }
    
    // 打开操作反馈（操作成功）
    function showSuccessResult(content){
        $('#app .loginresult').html('<div class="success">'+content+'</div>');
        $('#app .loginresult .success').css('display','block');
        setTimeout('hideResult()', 2500); // 2.5秒后自动关闭
    }
    
    // 打开操作反馈（操作失败）
    function showErrorResult(content){
        $('#app .loginresult').html('<div class="error">'+content+'</div>');
        $('#app .loginresult .error').css('display','block');
        setTimeout('hideResult()', 2500); // 2.5秒后自动关闭
    }
    
    // 关闭操作反馈
    function hideResult(){
        $("#app .loginresult .success").css("display","none");
        $("#app .loginresult .error").css("display","none");
        $("#app .loginresult .success").text('');
        $("#app .loginresult .error").text('');
    }
</script>

</body>
</html>